import { Avatar, Button } from "antd";
import { useDispatch } from "react-redux";
import "./index.scss";
import { useEffect, useState } from "react";
import { getFrendList } from "@renderer/api";
import { setFrendId } from "@renderer/store/action/frend";
import { setMenuId } from "@renderer/store/action/menu";

type PropType = {
  frendId: string;
};
const MyFrend: FC<PropType> = (props): JSX.Element => {
  const { frendId } = props;
  const dispatch = useDispatch();
  const [frendItem, setFrendItemItem] = useState({});
  useEffect(() => {
    const result = getFrendList();
    const frend = result.find((x) => x.frendId === frendId);
    setFrendItemItem(frend);
  }, [frendId]);
  const handleSend = () => {
    dispatch(setMenuId("chat"));
    dispatch(setFrendId(frendId));
  };
  return (
    <div className="my-frend">
      <div className="item">
        {/* <Avatar size={64} src={item.avatar} /> */}
        <Avatar size={64}>
          {frendItem && frendItem.frendName && frendItem.frendName.charAt(0)}
        </Avatar>
        <div className="wrap">
          <div className="title">{frendItem.frendName}</div>
          <div className="userId">id号:{frendItem.frendId}</div>
        </div>
      </div>
      <div className="my-frend--action">
        <Button type="primary" onClick={handleSend}>
          发消息
        </Button>
      </div>
    </div>
  );
};

export default MyFrend;
